<script setup lang="ts">
import { generateChartValueRange } from "@/utils";
import { COLORS } from "@/utils/tools";
import VSegmentedLine from "@/views/components/v-segmented-line.vue";
import { computed, ref } from "vue";

// Props 定义
interface Props {
  normalRange: [number, number]; // 正常值范围 [最小值, 最大值]
  actualValue: number; // 实际值
  title?: string; // 标题
  unit?: string; // 单位
  minValue?: number; // 整个指标的最小值
  maxValue?: number; // 整个指标的最大值
  showValue?: boolean; // 是否显示数值
  abnormalStatus?: number; // 异常状态
}

const props = withDefaults(defineProps<Props>(), {
  minValue: 0,
  maxValue: 100,
  showValue: true,
  abnormalStatus: 0
});
const segmentLineRef = ref<InstanceType<typeof VSegmentedLine>>();
const isHealthy = computed(() => {
  const [normalMin, normalMax] = props.normalRange;
  const max = maxValue.value;
  return props.actualValue >= normalMin && props.actualValue <= max;
});

const maxValue = computed(() => {
  let max = props.normalRange[1];
  if (
    !props.normalRange[0] &&
    !props.normalRange[1] &&
    !props.normalRange[1] &&
    props.abnormalStatus === 0 &&
    !Number.isNaN(Number(props.actualValue))
  ) {
    max = props.actualValue + props.actualValue / 4;
    console.log("change max ======", props);
  }

  return max;
});
// 高于正常范围
const isHigh = computed(() => {
  const [normalMin, maxValue] = props.normalRange;
  return props.actualValue > maxValue;
});
// 低于正常范围
const isLow = computed(() => {
  const [normalMin, maxValue] = props.normalRange;
  return props.actualValue < normalMin;
});
// 计算刻度列表
const segmentMarks = computed(() => {
  const [normalMin] = props.normalRange;
  const normalMax = maxValue.value;

  // const min = props.minValue;
  // const max = props.maxValue;
  const {
    min,
    max,
    value: actualValue
  } = generateChartValueRange(normalMin, normalMax, props.actualValue);

  // const actualValue = props.actualValue;
  const actualMark: any = {
    value: actualValue,
    showDot: true,
    dotColor: isHealthy.value ? COLORS.HEALTHY : COLORS.ABNORMAL,
    scopeColor: isHealthy.value ? COLORS.HEALTHY : COLORS.ABNORMAL_BG
  };
  const list: (any | null)[] = [
    { value: min, scopeColor: isLow.value ? COLORS.ABNORMAL_BG : undefined },
    isLow.value ? actualMark : null,
    {
      value: normalMin,
      text: normalMin > 0 ? `${normalMin}` : "",
      scopeColor: COLORS.HEALTHY
    },
    isHealthy.value ? actualMark : null,
    {
      value: normalMax,
      text: normalMax > normalMin ? `${normalMax}` : "",
      scopeColor: isHigh.value ? COLORS.ABNORMAL_BG : undefined
    },
    isHigh.value ? actualMark : null,
    { value: max }
  ];
  const filterList = list.filter(p => p !== null);

  return filterList;
});

// 范围边界显示值
const actualValueMark = computed(() => {
  if (segmentLineRef.value) {
    const markList = segmentLineRef.value.getMarkList();
    return markList.find(p => p.value === props.actualValue);
  }
  return null;
});
const spaceWidth = computed(() => {
  if (actualValueMark.value) {
    return actualValueMark.value.style.left;
  }
  return null;
});
</script>

<template>
  <div class="v-range-indicator" v-if="actualValue">
    <!-- <div v-if="title" class="v-range-indicator__title">
      <span>{{ title }}</span>
      <span v-if="unit" class="v-range-indicator__unit">({{ unit }})</span>
    </div> -->
    <div v-if="showValue && actualValueMark" class="v-range-indicator__info">
      <div
        v-if="spaceWidth"
        class="v-range-indicator__info-space"
        :style="{ width: `${spaceWidth}` }"
      />
      <div
        class="v-range-indicator__status"
        :class="{ 'v-range-indicator__status--abnormal': !isHealthy }"
      >
        <span>{{ actualValue }}</span>
        <span v-if="!isHealthy" style="margin-left: 5px">{{
          isHigh ? "↑" : "↓"
        }}</span>
      </div>
    </div>
    <v-segmented-line ref="segmentLineRef" :marks="segmentMarks" />
  </div>
</template>

<style lang="scss" scoped>
.v-range-indicator {
  position: relative;
  width: 100%;
  // max-width: 798px;

  &__title {
    font-size: 14px;
    font-weight: 600;
  }

  &__unit {
    font-size: 12px;
    color: #666666;
    margin-left: 2px;
  }

  &__info {
    width: 100%;
    display: flex;
    padding-bottom: 10px;
  }

  &__status {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    transform: translateX(-10px);
  }

  &__status--abnormal {
    color: var(--color-abnormal);
  }
}
</style>
